<template>
	<view class="content">
		<!-- 主页信息 -->
		<view class="homepage-head">
			<view class="head-user_avatar">
				<image :src="schoolInfo.avatar ? schoolInfo.avatar : defimg"></image>
			</view>
			<view class="head-info">
				<view class="nums">
					<view class="head-item">
						<view>抖校</view>
						<view class="num">{{schoolInfo.article_video_num}}</view>
					</view>
					<view class="head-item">
						<view>粉丝</view>
						<view class="num">{{schoolInfo.follow_num}}</view>
					</view>
					<view class="head-item">
						<view>获赞</view>
						<view class="num">{{schoolInfo.like_num}}</view>
					</view>
				</view>
				<view class="head_type">
					<view class="head_follow head_follow_cancle" v-if="schoolInfo.is_follow == 1" @tap="follow">取消关注</view>
					<view class="head_follow" v-else @tap="follow">关注</view>
					<view class="head_icon" :class="is_show ? 'head_icon_show':''" @tap="operation"><i class="iconfont1 iconxiaojiantou"></i></view>
				</view>
			</view>
		</view>
		<!-- 其它 -->
		<view class="other" v-show="is_show">
			<view class="title">{{schoolList.length > 1 ? '你的学校列表' : '暂无其他学校'}}</view>
			<scroll-view class="cont" scroll-x="true">
				<view class="scroll-item" v-for="(item,index) in schoolList" :key="index" v-if="index != currIndex">
					<image :src="item.avatar ? item.avatar : defimg" mode=""></image>
					<view class="tip">{{item.nickname}}</view>
					<view class="follow" @tap="gotoSchoolHome(index)">进入主页</view>
				</view>
			</scroll-view>
		</view>
		<!-- 学校信息 -->
		<view class="info">
			<view>学校名称：{{schoolInfo.schoolName}}</view>
			<view>
				<text :class="showMessage ? 'show-message' : ''">学校简介：{{schoolInfo.brieftext ? schoolInfo.brieftext : '暂无'}}</text>
				<i class="iconfont iconjiantou" @click="showMessage=!showMessage" :class="showMessage ? 'show-message-icon' : ''"></i>
				</view>
			<view>
				<view class="info-area">
					<i class="iconfont1 iconweizhi-xian"></i>{{schoolInfo.pro}}{{schoolInfo.city}}{{schoolInfo.area}}
				</view>
			</view>
		</view>
		<!-- 选项卡 -->
		<view class="tab">
			<view class="tabItem" :class="tabIndex == index ? 'tabItem_active':''" v-for="(item,index) in tabList" :key="index"
			 @tap="switchTap(index)">{{item}}</view>
		</view>
		<view class="msgBox">
			<!-- 视频 -->
			<my-video v-show="tabIndex == 0" :list="videoList" :status="status" :contentText="contentText" type="0" :users_type="users_type"
			 :pagesize="8" :school_id="schoolInfo.id"></my-video>
			<!-- 文章 -->
			<my-article v-show="tabIndex == 1" :list="artList" :status="status" :contentText="contentText" stateType="0"
			 :users_type="users_type"></my-article>
		</view>
		<!-- 蒙版 -->
		<view class="pop" v-show="is_head" catchtouchmove="false" @tap="close">
			<view class="popCont">
				<view class="popItem" v-for="(item,index) in popList" :key="index" @tap.stop="switchHead(index)">
					<i :class="item.pic"></i>{{ item.title }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import provinceData from '@/components/mpvue-citypicker/city-data/province.js';
	import cityData from '@/components/mpvue-citypicker/city-data/city.js';
	import areaData from '@/components/mpvue-citypicker/city-data/area.js';
	import myArticle from '@/components/school/artlist';
	import myVideo from '@/components/school/video';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			myArticle,
			myVideo,
			uniLoadMore
		},
		data() {
			return {
				schoolInfo: {}, //主页信息
				user_id: uni.getStorageSync('currentChild').student_id, // 学生ID
				is_show: false, //是否展示其它主页信息
				tabList: ['视频', '文章'],
				tabIndex: 0,
				artList: [], //文章列表
				videoList: [], //视频列表
				page: 1,
				pagesize: 8,
				page2: 1, // 存放文章的分页
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				popList: [{
						pic: 'iconfont iconwenzhang',
						title: '我的文章'
					},
					{
						pic: 'iconfont1 iconshipin1',
						title: '我的视频'
					}
				],
				is_head: false,
				schoolList: [], // 学校列表
				currIndex: 0,
				users_type: 3, // 默认晒娃文章
				userBlackList: [], // 黑名单列表
				showMessage: false, //是否展示简介
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				this.is_head = !this.is_head;
			} else {
				uni.navigateTo({
					url: 'QR-code?data=' + encodeURIComponent(JSON.stringify(this.schoolList[this.currIndex]))
				})
			}
		},
		onLoad(e) {
			if (e.users_type) {
				this.users_type = Number(e.users_type)
			}
		},
		onShow() {
			this.artList = []
			this.videoList = []
			this.page = 1
			this.page2 = 1
			this.getSchoolList();
			this.getUserBlackList()
		},
		onPullDownRefresh() {
			// 视频
			if (this.tabIndex == 0) {
				this.page = 1;
				this.videoList = []
				this.getVideoList(this.schoolInfo.id)
			} else {
				this.page2 = 1;
				this.artList = []
				this.getArtList(this.schoolInfo.id)
			}
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			if (this.tabIndex == 0) {
				this.page = this.page + 1;
			} else {
				this.page2 = this.page2 + 1;
			}
			var _this = this;
			setTimeout(() => {
				if (this.tabIndex == 0) {
					this.getVideoList(this.schoolInfo.id)
				} else {
					this.getArtList(this.schoolInfo.id)
				}
			}, 500);
		},
		methods: {
			// 获取黑名单列表
			getUserBlackList() {
				this.userBlackList = []
				this.$zapi.apiPost('user/video.User/UserBlackList').then(res => {
					if (res.data.code == 200) {
						this.userBlackList = res.data.data.data
					}
				})
			},
			getVideoList(school_id) {
				let data = {
					page: this.page,
					pagesize: this.pagesize,
					users_type: this.users_type,
					school_id: school_id
				}
				this.$zapi.apiPost('user/video.Lists/VideoList', data).then(res => {
					if (res.data.code == 200) {
						let list = res.data.data.data;
						list.forEach((v, i) => {
							v.black_state = false
							if (this.userBlackList.length > 0) {
								this.userBlackList.forEach(v1 => {
									if (v.user_id == v1.user_id) {
										v.black_state = true
									}
								})
							}
							if (v.avatar && v.avatar.substring(0, 4) != 'http') {
								// 给用户赋予默认头像
								v.avatar = this.defimg
							}
						})
						this.videoList = this.videoList.concat(list)
						this.status = 'more'
					} else {
						this.status = 'noMore'
					}
				})
			},
			// 获取该学校的文章
			getArtList(school_id) {
				let data = {
					is_check: 2,
					users_type: this.users_type,
					school_id: school_id,
					page: this.page2,
					pagesize: this.pagesize
				}
				this.$zapi.apiPost('user/article.Lists/articleList', data).then(res => {
					if (res.data.code == 200) {
						let list = res.data.data.data;
						list.forEach((v, i) => {
							v.black_state = false
							if (this.userBlackList.length > 0) {
								this.userBlackList.forEach(v1 => {
									if (v.user_id == v1.user_id) {
										v.black_state = true
									}
								})
							}
						})
						this.artList = this.artList.concat(list)
						this.status = 'more'
					} else {
						this.status = 'noMore'
					}
				})
			},
			gotoSchoolHome(index) {
				this.is_show = false
				this.currIndex = index;
				this.page = 1
				this.page2 = 1
				this.videoList = []
				this.artList = []
				this.getSchoolInfo(this.schoolList[index].id)
				this.getVideoList(this.schoolList[index].id)
				this.getArtList(this.schoolList[index].id)
				uni.setNavigationBarTitle({
					title: this.schoolList[index].nickname
				})
				// 存储历史选择抖校记录
				uni.setStorageSync('currentSchool', this.schoolList[index])
			},
			/* 获取学校 */
			getSchoolList() {
				this.$zapi.apiPost('user/App/userschoolList', {
					student_id: this.user_id
				}).then(res => {
					if (res.data.code == 200) {
						this.schoolList = res.data.data
						var schoolData = uni.getStorageSync('currentSchool')
						if (schoolData) {
							var isIn = false // 切换了孩子 判断该孩子是否有该学校
							this.schoolList.forEach((item, index) => {
								if (item.id == schoolData.id) {
									this.currIndex = index
									isIn = true
								}
							})
							if (isIn) {
								this.getSchoolInfo(schoolData.id)
								this.getVideoList(schoolData.id)
								this.getArtList(schoolData.id)
								uni.setNavigationBarTitle({
									title: schoolData.nickname
								})
							} else {
								this.getSchoolInfo(res.data.data[0].id)
								this.getVideoList(res.data.data[0].id)
								this.getArtList(res.data.data[0].id)
								uni.setNavigationBarTitle({
									title: res.data.data[0].nickname
								})
							}
						} else {
							this.getSchoolInfo(res.data.data[0].id)
							this.getVideoList(res.data.data[0].id)
							this.getArtList(res.data.data[0].id)
							uni.setNavigationBarTitle({
								title: res.data.data[0].nickname
							})
						}
					} else {
						uni.showToast({
							title: '您还未加入学校,请加入学校',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}
				})
			},
			/* 获取学校主页信息 */
			getSchoolInfo(school_id) {
				this.$zapi.apiPost('user/shakeschool.Users/homeDetails', {
					school_id: school_id
				}).then(res => {
					if (res.data.code == 200) {
						this.schoolInfo = res.data.data
						// 处理数据
						this.schoolInfo.avatar = this.schoolList[this.currIndex].avatar
						this.schoolInfo.schoolName = this.schoolList[this.currIndex].nickname
						this.schoolInfo.brieftext = this.schoolList[this.currIndex].brieftext
						this.schoolInfo.id = this.schoolList[this.currIndex].id
						this.schoolInfo.provinec_id = this.schoolList[this.currIndex].provinec_id
						this.schoolInfo.city_id = this.schoolList[this.currIndex].city_id
						this.schoolInfo.area_id = this.schoolList[this.currIndex].area_id
						var index1 = 0
						// 处理地区
						for (var i = 0; i < provinceData.length; i++) {
							if (provinceData[i].value == this.schoolInfo.provinec_id) {
								this.schoolInfo.pro = provinceData[i].label;
								index1 = i;
							}
						}
						var index2 = 0; // 市的索引
						for (var i = 0; i < cityData[index1].length; i++) {
							if (cityData[index1][i].value == this.schoolInfo.city_id) {
								this.schoolInfo.city = cityData[index1][i].label;
								index2 = i;
							}
						}
						for (var i = 0; i < areaData[index1][index2].length; i++) {
							if (areaData[index1][index2][i].value == this.schoolInfo.area_id) {
								this.schoolInfo.area = areaData[index1][index2][i].label;
							}
						}
					}
				})
			},
			/* 关注 & 取消关注 */
			follow() {
				let url = ''
				if (this.schoolInfo.is_follow == 2) {
					url = 'user/shakeschool.Users/schoolFollowAdd'
				} else {
					url = 'user/shakeschool.Users/schoolFollowDel'
				}
				this.$zapi.apiPost(url, {
					school_id: this.schoolInfo.id
				}).then(res => {
					if (res.data.code == 200) {
						if (this.schoolInfo.is_follow == 2) {
							this.schoolInfo.is_follow = 1
								++this.schoolInfo.follow_num
						} else {
							this.schoolInfo.is_follow = 2
								--this.schoolInfo.follow_num
						}
						this.$forceUpdate()
					}
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				})
			},
			/* 操作 */
			operation() {
				this.is_show = !this.is_show;
			},
			/* 选项卡切换 */
			switchTap(index) {
				this.tabIndex = index;
			},
			/* 关闭蒙版 */
			close() {
				this.is_head = false;
			},
			/* 蒙版切换 */
			switchHead(index) {
				this.is_head = false;
				var url = '';
				if (index == 0) {
					url = 'manage'
				} else {
					url = 'my-center?users_type=' + this.users_type
				}
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.content {
		min-height: 100%;
		display: flex;
		flex-direction: column;
	}

	.iconjiantou {
		font-size: 48upx;
		font-weight: bold;
	}

	.show-message {
		overflow: auto !important;
		white-space: pre-wrap !important;
		word-wrap: break-word !important;
		word-break: break-word !important;
	}

	.show-message-icon {
		transform: rotate(90deg);
	}

	/* 顶部 */
	.homepage-head {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 30upx;
		background-color: #FFFFFF;
		flex-shrink: 0;

		// 头像
		.head-user_avatar {
			margin-right: 80upx;

			image {
				width: 140upx;
				height: 140upx;
				border-radius: 50%;
				border: 2px solid #FFFFFF;
			}
		}

		.head-info {
			width: 100%;

			.nums {
				display: flex;
				justify-content: space-between;
				align-items: center;

				& view {
					color: #999999;
					text-align: center;
				}

				.num {
					color: #333333;
					font-size: 34upx;
				}
			}

			.head_type {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				margin-top: 10upx;

				& view {
					color: #FFFFFF;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					border-radius: 30upx;
				}

				.head_follow {
					width: 78%;
					font-size: 30upx;
					background: linear-gradient(360deg, rgba(254, 118, 91, 1) 0%, rgba(254, 185, 104, 1) 100%);
					box-shadow: 0px 3px 6px rgba(127, 234, 208, 0.1);
				}

				.head_icon {
					width: 60upx;
					background: #FF9900;
				}

				.head_icon_show {
					transform: rotate(180deg);
				}
			}
		}
	}

	/* 其他主页 */
	.other {
		margin: 30upx 30upx 40upx;
		width: calc(100% - 60upx);

		.title {
			color: #999999;
			font-size: 26upx;
			margin-bottom: 30upx;
		}

		.cont {
			width: 100%;
			white-space: nowrap;

			.scroll-item {
				width: 220upx;
				height: 290upx;
				background: #FFFFFF;
				border-radius: 20upx;
				display: inline-block;
				margin-right: 12upx;

				& image {
					width: 120upx;
					height: 120upx;
					border-radius: 50%;
					margin: 20upx 50upx;
				}

				.tip {
					color: #999999;
					font-size: 26upx;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin: 0 20upx;
				}

				.follow {
					color: #FFFFFF;
					background: #FF9900;
					width: 144upx;
					height: 44upx;
					line-height: 44upx;
					text-align: center;
					border-radius: 30upx;
					position: relative;
					bottom: -6upx;
					left: 38upx;
				}
			}
		}
	}

	/* 学校信息 */
	.info {
		padding: 40upx 30upx;
		width: calc(100% - 60upx);
		background-color: #FFFFFF;

		& view {
			color: #666666;
			font-size: 26upx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			& text {
				width: 90%;
				color: #666666;
				font-size: 26upx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			& i {
				line-height: 1;
			}
		}

		.info-area {
			background-color: #F3F3F3;
			border-radius: 24upx;
			justify-content: flex-start;
			padding: 6upx 16upx;
			line-height: 1.5;
			margin-top: 20upx;

			& i {
				margin-right: 12upx;
			}
		}
	}

	/* 选项卡 */
	.tab {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		background-color: #FFFFFF;
		margin-top: 20upx;
		border-bottom: 2upx solid #F7F7F7;
		flex-shrink: 0;

		.tabItem {
			color: #999999;
			font-size: 32upx;
			text-align: center;
			position: relative;
			padding: 12upx 0;
		}

		.tabItem_active {
			color: #FF9900;
		}

		.tabItem_active:before {
			position: absolute;
			content: '';
			width: 36upx;
			height: 4upx;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			background: #FF9900;
		}
	}

	/* 蒙版 */
	.pop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);

		.popCont {
			position: absolute;
			right: 30upx;
			margin-top: 20upx;
			width: 40%;
			background-color: #FFFFFF;
			border-radius: 10upx;

			.popItem {
				color: #333333;
				font-size: 34upx;
				height: 100upx;
				line-height: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				& i {
					color: #000000;
					font-size: 44upx;
					margin-right: 30upx;
				}
			}
		}

		.popCont:before {
			content: '';
			position: absolute;
			display: inline-block;
			border-width: 18upx;
			border-style: solid;
			border-color: white transparent transparent transparent;
			transform: rotate(180deg);
			top: -30upx;
			right: 14upx;
		}
	}

	.news_other {
		background-color: #FFFFFF;
		padding-top: 0 !important;
	}

	.videoAll {
		padding-top: 40upx !important;
		background-color: #FFFFFF;
	}

	.cont {
		padding-top: 0 !important;
	}

	.msgBox {
		background-color: #FFFFFF;
		flex: 1;
	}
</style>
